<template>
  <div
    class="basicTable"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <!-- 表格新增、导入、导出等按钮 -->
    <el-button
      v-for="(btn, index) in btnGroup"
      size="mini"
      class="tableTopBtn"
      @click="tableTopBtnClick(btn)"
      :key="index"
      :disabled="btn.disabled ? btn.disabled : false"
      :type="btn.type ? btn.type : ''"
      >{{ btn.label ? btn.label : "" }}</el-button
    >
    <!-- :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }" -->
    <el-table
      :data="table.data"
      border
      :height="tableHeight"
      style="width: 100%"
      @select="select"
      @select-all="select"
    >
      <el-table-column
        v-if="table.isSelect"
        fixed="left"
        table-layout="auto"
        type="selection"
        width="55"
      />
      <template v-for="(item, index) in table.column">
        <el-table-column
          :prop="item.prop"
          v-if="item.prop"
          :key="index"
          :label="item.label"
          show-overflow-tooltip
          fixed="left"
        >
          <!-- 定制列 -->
          <template slot-scope="scope">
            <!-- 定制表格数据可点击、适用于文字链接、点击下载等 -->
            <span
              v-if="item.type === 'columnClick'"
              style="cursor: pointer; color: #1aa0f5; margin-left: 10px"
              @click="rowBtnClick(scope.row, item)"
            >
              {{ item.isShowLabel ? item.label : scope.row[item.prop] }}
            </span>
            <!-- 定制表格列switch开关 -->
            <el-switch
              v-else-if="item.type === 'switch'"
              v-model="scope.row[item.prop]"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
            <!-- 定制表格下拉框 -->
            <el-select
              v-else-if="item.type === 'select'"
              v-model="scope.row[item.prop]"
              size="mini"
              :placeholder="item.placeholder ? item.placeholder : '请选择'"
            >
              <el-option
                v-for="(item, index) in item.options"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- 定制表格tag标签 -->
            <el-tag v-else-if="item.type === 'tag'" :type="item.tagType">{{
              scope.row[item.prop]
            }}</el-tag>
            <!-- 定制图片 -->
            <div v-else-if="item.type === 'image'">
              <el-image
                v-if="scope.row[item.prop]"
                class="imageSize"
                :src="scope.row[item.prop]"
                title="双击放大"
                alt="加载失败"
              />
              <!-- 加载失败默认图 -->
              <el-image v-else class="imageSize">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <!-- 常规列 -->
            <span v-else>
              {{ scope.row[item.prop] }}
            </span>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column
          v-else
          :key="index"
          fixed="right"
          :label="item.label"
          :width="item.width || '800'"
        >
          <template slot-scope="scope">
            <div
              style="display: inline-block; margin-right: 5px"
              v-for="(btn, index) in item.rowBtnGroup"
              :key="index"
            >
              <!-- 满足表格项中的某一个值才显示 -->
              <el-button
                v-if="
                  btn.hide
                    ? scope.row[btn.hide.keyWord] == btn.hide.value
                    : false
                "
                size="mini"
                :type="btn.type"
                @click="rowBtnClick(scope.row, btn)"
              >
                <template>
                  <!-- 满足表格项中的某一个值才显示 -->
                  <span
                    v-if="
                      btn.hide
                        ? scope.row[btn.hide.keyWord] == btn.hide.value
                        : false
                    "
                    >{{ btn.label }}</span
                  >
                </template>
              </el-button>
              <!-- 表格项中有值就显示 -->
              <el-button
                v-else-if="btn.show ? scope.row[btn.show.keyWord] : false"
                size="mini"
                :type="btn.type"
                @click="rowBtnClick(scope.row, btn)"
                >{{ btn.label }}</el-button
              >
              <!-- 按钮值根据条件状态切换 -->
              <el-button
                v-else-if="btn.check ? btn.check : false"
                size="mini"
                :type="btn.type"
                @click="rowBtnClick(scope.row, btn)"
                >{{
                  Array.isArray(btn.label)
                    ? detailCheckLabel(scope.row, btn)
                    : ""
                }}</el-button
              >

              <!-- 常规操作列按钮 -->
              <el-button
                v-else
                size="mini"
                :type="btn.type"
                @click="rowBtnClick(scope.row, btn)"
                >{{ btn.label }}</el-button
              >
            </div>
          </template>
        </el-table-column>
      </template>
      <!-- 分页操作 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>
    <!-- 编辑、新建弹窗 -->
    <!-- 关于destroy-on-close="true"组件未销毁问题：（destroy-on-close="true"的bug：设置destroy-on-close未true是，关闭弹窗并不能销毁组件
      解决方法：1、用v-if判断来强制组件销毁与更新
      2、在组件中添加唯一值key强制重新渲染） -->
    <el-dialog
      v-if="dialog.dialogVisible"
      :title="dialog.title"
      :visible.sync="dialog.dialogVisible"
      :width="dialog.width"
      :close-on-click-modal="false"
      :before-close="exit"
      :fullscreen="dialog.fullscreen"
      :destroy-on-close="true"
    >
      <component
        :is="dialog.componentName"
        :dialog="dialog"
        :pagination="pagination"
        @exit="exit"
        :getTableData="getTableData"
      />
    </el-dialog>
  </div>
</template>
<script>
// 引入表单
import TableComponents from "@/views/exampleTable/components/index.js";
export default {
  components: {
    ...TableComponents,
  },
  props: {
    table: {
      type: Object,
      default: () => {
        return {
          isSelect: false, //
          data: [],
          column: [],
        };
      },
    },
    loading:{
      type:Boolean,
      default:false
    },
    tableHeight: {
      type: String,
      default: "calc(100vh - 280px)",
    },
    dialog: {
      type: Object,
      default: () => {
        return {
          title: "新建",
          width: "30%",
          dialogVisible: false,
          fullscreen: false,
          componentName: "",
        };
      },
    },
    getTableData: {
      type: Function,
      required: false,
    },
    selectRow: {
      type: Function,
      required: false,
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          size: 10,
          current: 1,
          total: 0,
        };
      },
    },
    btnGroup: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  created() {
    this.getTableData && this.getTableData(this.pagination);
  },
  methods: {
    // 表格操作列操作start
    //处理多选框
    select(row) {
      this.selectRow && this.selectRow(row);
    },
    // 处理操作列表格按钮根据不同的值进行切换
    detailCheckLabel(row, btn) {
      let label = "";
      for (let key in row) {
        if (key == btn.keyWord) {
          btn.label.map((item) => {
            if (item.value == row[key]) {
              label = item.label;
            }
          });
        }
      }
      return label;
    },
    rowBtnClick(row, btn) {
      // 删除需要二次确认
      if (btn?.isConfirm) {
        this.$confirm("此操作将永久删除该项数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            btn.event && btn.event(row);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        // 修改,查看等其他操作
        btn.event && btn.event(row);
      }
    },
    // 表格操作列操作END
    tableTopBtnClick(btn) {
      // 批量删除二次确认
      if (btn?.isConfirm) {
        this.$confirm("此操作将永久删除选中的数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            btn.event && btn.event();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        // 修改,查看等其他操作
        btn.event && btn.event();
      }
    },
    // 表格分页操作START
    // 表格条数大小改变
    handleSizeChange(val) {
      this.pagination.size = val;
      this.getTableData && this.getTableData(this.pagination);
    },
    handleCurrentChange(val) {
      // 表格分页改变
      this.pagination.current = val;
      this.getTableData && this.getTableData(this.pagination);
    },
    // 表格分页操作END
    // 通用弹窗操作
    exit() {
      this.dialog.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.basicTable {
  .tableTopBtn {
    margin: 20px 20px 20px 0px;
  }
  .imageSize {
    height: 20px;
    width: 20px;
    // border-radius: 20px;
    font-size: 20px;
    cursor: pointer;
  }
  .el-pagination {
    display: flex;
    margin-top: 20px;
    justify-content: end;
  }
  .el-dialog__wrapper {
    ::v-deep .el-dialog {
      .el-dialog__header {
        background-color: #ccc;
      }
    }
  }
}
</style>